import React, { Component } from 'react';

class House extends Component {
  constructor(props) {
    super(props)

    this.state = {
      sleep: false
    }
  }

  componentDidMount() {

  }

  handleInputChange =  (event) => {
    this.setState({sleep: event.target.checked });
  }

  lightRender = () => (
    <div className="lightbulb-container">
      <input type="checkbox" id="lightswitch" />
        <div id="lightbulb"></div>
        <label htmlFor="lightswitch">
          <div className="outer-switch">
            <div className="inner-switch"></div>
          </div>
        </label>
    </div>
  )



  render() {
    return (
      <div className="house" id="house" data-rooms="6">
        <div className="house-wings" data-flip-key="wings">
          <div className="house-left-wing">
            <div className="house-window"></div>
            <div className="house-window"></div>
            <div className="house-sparkle">
              <div className="house-sparkle-dots"></div>
            </div>
          </div>
          <div className="house-right-wing">
            { this.lightRender()}
            <div className="house-window"></div>
            <div className="house-window"></div>
            <div className="house-sparkle">
              <div className="house-sparkle-dots"></div>
            </div>
          </div>
          <div className="house-roof">
            <div className="house-ledge"></div>
          </div>
        </div>
        <div className="house-front" data-flip-key="front">
          <div className="house-chimney"></div>
          <div className="house-facade"></div>
          <div className="house-window">
            <div className="house-sparkle">
              <div className="house-sparkle-dots"></div>
            </div>
          </div>
          <div className="house-doorway">
            <div className="house-stairs"></div>
            <div className="house-door"></div>
          </div>
          <div className="house-gable">
            <div className="house-roof">
              <div className="house-ledge"></div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default House;
